<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border:  1px solid red;"></canvas>
		<script>
			window.onload = function() {
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext("2d");
				canvas.width = 400;
				canvas.height = 300;
				createPolygon(50, 50, 8, 40, cxt);
				var movex, movey;
				//创建一个正多边形绘制函数
				function createPolygon(dx, dy, n, size, cxt) {
					cxt.beginPath();
					for (var i = 0; i < n; i++) {
						var x = size * Math.cos(i * 2 * Math.PI / n) + dx;
						var y = size * Math.sin(i * 2 * Math.PI / n) + dy;
						cxt.lineTo(x, y);
					}
					cxt.fillStyle = "red";
					cxt.fill();
					cxt.closePath();
				}
				canvas.addEventListener("mousedown", downfun);

				function downfun(e) {
					var x = e.clientX;
					var y = e.clientY;
					if (cxt.isPointInPath(x, y)) {
						canvas.addEventListener("mousemove", movefun);
					}
					canvas.addEventListener("mouseup",upfun);
				}
				function movefun(e){
					movex=e.clientX;
					movey=e.clientY;
					cxt.clearRect(0,0,canvas.width,canvas.height);
					createPolygon(movex,movey,8,40,cxt);
				}
				function upfun(){
					canvas.removeEventListener("mousemove",movefun);
				}
			}
		</script>
	</body>
</html>
